<template>
  <div>
    <div slot="com_header"><bread></bread></div>
    <div slot="com_con">
      <div id="main"></div>
    </div>
  </div>
</template>


<script>
import * as echarts from "echarts";
import bread from "../../components/bread";
export default {
  data() {
    return {
      shuju: {
        legend: {},
        series: [],
        xAxis: [],
        yAxis: [],
      },
    };
  },
  mounted() {
    this.query();
  },
  watch: {
    shuju: {
      deep: true,
      handler() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById("main"));
        // 绘制图表
        var option;
        option = {
          title: {
            text: "用户来源",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#6a7985",
              },
            },
          },
          legend: {
            data: this.shuju.legend.data,
          },
          toolbox: {
            feature: {
              saveAsImage: {},
            },
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              boundaryGap: false,
              data: this.shuju.xAxis[0].data,
            },
          ],
          yAxis: [
            {
              type: "value",
            },
          ],
          series: this.shuju.series,
        };
        myChart.setOption(option);
      },
    },
  },

  components: {
    bread,
  },

  methods: {
    async query() {
      let rst = await this.$http.get("reports/type/1");
      this.shuju = rst.data;
      console.log(this.shuju.xAxis[0].data);
    },
  },
};
</script>

<style lang="less" scoped>
#main {
  height: 600px;
  width: 1100px;
}
</style>    